<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>echarts5-dataset</title>
    <link crossorigin="anonymous"
        integrity="sha512-usVBAd66/NpVNfBge19gws2j6JZinnca12rAe2l+d+QkLU9fiG02O1X8Q6hepIpr/EYKZvKx/I9WsnujJuOmBA=="
        href="https://lib.baomitu.com/twitter-bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet">
    <script crossorigin="anonymous"
        integrity="sha512-BuAhidfi8Cl0IPjBLyj4ob75IMHmQxoGCm7y0Vabo3xJD+QuDU9QG3ZVJd0QZ0uzTQSChz/iOhRxxbZS1z/F6g=="
        src="https://lib.baomitu.com/echarts/5.1.2/echarts.js"></script>
    <style>
        .chart-one {
            width: 100%;
            height: 400px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col">
                <div id="row_1_1" class="chart-one"></div>
            </div>
            <div class="col">
                <div id="row_1_2" class="chart-one"></div>
            </div>
            <div class="col">
                <div id="row_1_3" class="chart-one"></div>
            </div>
        </div>
        <div class="row g-3">
            <div class="col-auto">
                <label>Step</label>
            </div>
            <div class="col-auto">
                <input type="number" class="form-control" id="step" value="50" placeholder="step"
                    onkeydown="onEnter(event)">
            </div>
            <div class="col-auto">
                <button type="button" class="btn btn-primary mb-3" onclick="onRefresh()">刷新</button>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <div id="row_2_1" class="chart-one"></div>
            </div>

        </div>
        <div class="row">
            <div class="col">
                <div id="row_3_1" class="chart-one"></div>
            </div>

        </div>
        <div class="row">
            <div class="col">
                <div id="row_4_1" class="chart-one"></div>
            </div>

        </div>
        <div class="row">
            <div class="col">
                <div id="row_5_1" class="chart-one"></div>
            </div>

        </div>
    </div>


    <script type="text/javascript">
        (function () {
            var myChart = echarts.init(document.getElementById('row_1_1'));
            var dataset = {
                source: [
                    ["销量", "衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
                    ["v", 5, 20, 36, 10, 10, 20]
                ]
            };
            var option = {
                title: {
                    text: 'ECharts Before'
                },
                tooltip: {},
                legend: {
                    data: ['销量']
                },
                dataset: dataset,
                xAxis: {
                    type: 'category'
                },
                yAxis: {},
                series: [{
                    type: 'bar',
                    seriesLayoutBy: 'row',

                }]
            };

            myChart.setOption(option);
        })()
    </script>

    <script type="text/javascript">
            (function () {
                var myChart = echarts.init(document.getElementById('row_1_2'));
                var dataset = {
                    source: [
                        ["衬衫", 5, 10],
                        ["羊毛衫", 20, 40],
                        ["雪纺衫", 36, 72],
                        ["裤子", 10, 20],
                        ["高跟鞋", 10, 20],
                        ["袜子", 20, 40]
                    ]
                };
                var option = {
                    title: {
                        text: 'ECharts dataset Default'
                    },
                    tooltip: {},
                    legend: {
                        data: ['销量']
                    },
                    dataset: dataset,
                    xAxis: {
                        type: 'category'
                    },
                    yAxis: {},
                    series: [{
                        type: 'bar'
                    }, {
                        type: 'bar'
                    }]
                };

                myChart.setOption(option);
            })()
    </script>

    <script type="text/javascript">
            (function () {
                var myChart = echarts.init(document.getElementById('row_1_3'));
                var dataset = {
                    // 用 dimensions 指定了维度的顺序。直角坐标系中，
                    // 默认把第一个维度映射到 X 轴上，第二个维度映射到 Y 轴上。
                    // 如果不指定 dimensions，也可以通过指定 series.encode
                    // 完成映射，参见后文。
                    dimensions: ['product', '2015', '2016', '2017'],
                    source: [
                        { product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7 },
                        { product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1 },
                        { product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5 },
                        { product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1 }
                    ]
                };
                var option = {
                    legend: {},
                    tooltip: {},
                    dataset: dataset,
                    xAxis: { type: 'category' },
                    yAxis: {},
                    series: [
                        { type: 'bar' },
                        { type: 'bar' },
                        { type: 'bar' }
                    ]
                };
                myChart.setOption(option);
            })()
    </script>

    <script>
        var step = 50
        var tsChart
        var multiTsChart
        var values = []
        init()
        function init() {
            fetch('./grafana-promsql.json').then(response => response.json())
                .then(json => {
                    values = json.data.result[0].values

                    initTsChart();
                    initMultiTsChart();
                })
            document.querySelector("#step").value = step
        }
        function onRefresh() {
            step = document.querySelector("#step").value

            tsChart.setOption({
                dataset: { source: getSource(values) }
            });
            multiTsChart.setOption({
                dataset: { source: getSource(values) }
            });
        }
        function onEnter(e) {
            if (e.keyCode == 13) {
                onRefresh()
                return false
            }
        }
        function getSource(values, other) {
            var source = []

            values.forEach((v, i) => {
                if (i % step == 0 && v[1]) {
                    if (other) {
                        source.push({ "time": v[0] * 1000, "value": v[1] * (Math.random() * 0.05 + 0.95), "rand": v[1] * (Math.random() * 100) })
                    } else {
                        // source.push({ "time": v[0] * 1000, "value": v[1] })
                        source.push({ "time": v[0] * 1000, "value": v[1], "rand": v[1] * (Math.random() * 100) })
                    }
                }
            });

            return source
        }

        function initTsChart() {
            tsChart = echarts.init(document.getElementById('row_2_1'));
            var source = getSource(values)
            var min = Math.min.apply(null, source.map(v => v.value));
            console.log({ source, min })
            var dataset = [{
                source: source
            }];
            var option = {
                title: {
                    text: 'ECharts dataset Grafana - Promethues'
                },
                tooltip: {
                    trigger: 'axis',
                    formatter: function (params) {
                        // console.log(params)
                        params = params[0];
                        return 'time : ' + params.value['value'] + '--- rand: ' + params.value['rand'];
                    },
                },
                xAxis: {
                    type: 'time',
                    splitLine: {
                        show: false
                    }
                },
                yAxis: {
                    type: 'value',
                    min: Math.floor(min)
                },
                series: [{
                    type: 'line',
                    showSymbol: false,
                }],

                dataset: dataset,
            };

            tsChart.setOption(option);
        }
        function initMultiTsChart() {
            multiTsChart = echarts.init(document.getElementById('row_3_1'));


            var dataset = [{
                source: getSource(values),
            }, {
                source: getSource(values, 1),
            }];

            console.log({ dataset })
            var option = {
                title: {
                    text: 'ECharts dataset Grafana - Promethues (multi-line)'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        animation: false
                    }
                },
                xAxis: {
                    type: 'time',
                    splitLine: {
                        show: false
                    }
                },
                yAxis: {
                    type: 'value',
                    min: 6
                },
                series: [{
                    type: 'line',
                    datasetIndex: 0
                }, {
                    type: 'line',
                    datasetIndex: 1,
                    lineStyle: {
                        color: "green"
                    }
                }],

                dataset: dataset,
            };

            multiTsChart.setOption(option);

        }
    </script>

    <script type="text/javascript">
        (function () {
            var myChart = echarts.init(document.getElementById('row_4_1'));
            var option = {
                title: {
                    text: 'ECharts dataset filter - Pie'
                },
                dataset: [{
                    // 这个 dataset 的 index 是 `0`。
                    source: [
                        ['Product', 'Sales', 'Price', 'Year'],
                        ['Cake', 123, 32, 2011],
                        ['Cereal', 231, 14, 2011],
                        ['Tofu', 235, 5, 2011],
                        ['Dumpling', 341, 25, 2011],
                        ['Biscuit', 122, 29, 2011],
                        ['Cake', 143, 30, 2012],
                        ['Cereal', 201, 19, 2012],
                        ['Tofu', 255, 7, 2012],
                        ['Dumpling', 241, 27, 2012],
                        ['Biscuit', 102, 34, 2012],
                        ['Cake', 153, 28, 2013],
                        ['Cereal', 181, 21, 2013],
                        ['Tofu', 395, 4, 2013],
                        ['Dumpling', 281, 31, 2013],
                        ['Biscuit', 92, 39, 2013],
                        ['Cake', 223, 29, 2014],
                        ['Cereal', 211, 17, 2014],
                        ['Tofu', 345, 3, 2014],
                        ['Dumpling', 211, 35, 2014],
                        ['Biscuit', 72, 24, 2014],
                    ],
                    // id: 'a'
                }, {
                    transform: {
                        type: 'filter',
                        config: { dimension: 'Year', value: 2011 },
                        // print:true
                    },
                }, {
                    transform: {
                        type: 'filter',
                        config: { dimension: 'Year', value: 2012 }
                    }
                }, {
                    transform: {
                        type: 'filter',
                        config: { dimension: 'Year', value: 2013 }
                    }
                }],
                series: [{
                    type: 'pie', radius: 50, center: ['25%', '50%'],
                    datasetIndex: 1
                }, {
                    type: 'pie', radius: 50, center: ['50%', '50%'],
                    datasetIndex: 2
                }, {
                    type: 'pie', radius: 50, center: ['75%', '50%'],
                    datasetIndex: 3
                }],
                tooltip: {
                    // trigger: 'axis',
                    formatter: function (params) {
                        // console.log(params)
                        var data = params.data;
                        return `${data[0]}  sales:${data[1]},price:${data[2]},year:${data[3]}`;
                    },
                },
            };
            myChart.setOption(option);
        })()
    </script>
    <script type="text/javascript">
            (function () {
                var myChart = echarts.init(document.getElementById('row_5_1'));
                
                fetch('./life-expectancy-table.json').then(response => response.json())
                .then(json => {
                    run(json)
                })
                function run(_rawData) {

                    option = {
                        dataset: [{
                            id: 'dataset_raw',
                            source: _rawData
                        }, {
                            id: 'dataset_since_1950_of_germany',
                            fromDatasetId: 'dataset_raw',
                            transform: {
                                type: 'filter',
                                config: {
                                    and: [
                                        { dimension: 'Year', gte: 1950 },
                                        { dimension: 'Country', '=': 'Germany' }
                                    ]
                                }
                            }
                        }, {
                            id: 'dataset_since_1950_of_france',
                            fromDatasetId: 'dataset_raw',
                            transform: {
                                type: 'filter',
                                config: {
                                    and: [
                                        { dimension: 'Year', gte: 1950 },
                                        { dimension: 'Country', '=': 'France' }
                                    ]
                                }
                            }
                        }],
                        title: {
                            text: 'Income of Germany and France since 1950'
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        xAxis: {
                            type: 'category',
                            nameLocation: 'middle'
                        },
                        yAxis: {
                            name: 'Income'
                        },
                        series: [{
                            type: 'line',
                            datasetId: 'dataset_since_1950_of_germany',
                            showSymbol: false,
                            encode: {
                                x: 'Year',
                                y: 'Income',
                                itemName: 'Year',
                                tooltip: ['Income'],
                            }
                        }, {
                            type: 'line',
                            datasetId: 'dataset_since_1950_of_france',
                            showSymbol: false,
                            encode: {
                                x: 'Year',
                                y: 'Income',
                                itemName: 'Year',
                                tooltip: ['Income'],
                            }
                        }]
                    };

                    myChart.setOption(option);

                }
            })()
    </script>


</body>

</html>